<template>
  <span ref="countRef">
    {{ displayNumber }}
  </span>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

// 接收参数
const props = defineProps({
  startVal: {
    type: [String, Number],
    default: 0
  },
  endVal: {
    type: [String, Number],
    default: 0
  },
  duration: {
    type: Number,
    default: 2000
  }
})

// 数据
const countRef = ref()
const displayNumber = ref(props.startVal) // 初始值

// 动画逻辑
const animate = (startVal, endVal, duration) => {
  const start = Number(String(startVal).replace(/,/g, '')) // 确保是数值类型
  const end = Number(String(endVal).replace(/,/g, ''))
  const totalFrames = Math.floor(duration / 16) // 总帧数，基于约60fps
  const increment = end - start // 总的数值变化

  let frame = 0 // 当前帧数
  const interval = setInterval(() => {
    frame++
    const progress = Math.min(frame / totalFrames, 1) // 当前进度（0~1）
    const current = Math.round(start + increment * progress) // 计算当前值
    if (progress >= 1) {
      clearInterval(interval)
    }
    displayNumber.value = current.toLocaleString() // 格式化显示
  }, 16)
}


onMounted(() => {
  useIntersectionObserver(countRef, ([entry], observerElement) => {
    if (entry.isIntersecting) {
      // 停止观察，避免重复触发
      observerElement.unobserve(entry.target)
      // 执行动画
      animate(props.startVal, props.endVal, props.duration)
    }
  })
})
</script>
